<!DOCTYPE html>
<html class="ui-page-login">

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link href="css/mui.min.css" rel="stylesheet" />
		<link href="css/style.css" rel="stylesheet" />
		<link href="css/mui.picker.css" rel="stylesheet" />
		<link href="css/mui.poppicker.css" rel="stylesheet" />
		<style>
			.area {
				margin: 20px auto 0px auto;
			}
			.mui-input-group:first-child {
				margin-top: 20px;
			}
			.mui-input-group label {
				width: 25%;    white-space: nowrap;
			}
			.mui-input-row label~input,
			.mui-input-row label~select,
			.mui-input-row label~textarea {
				width: 75%;
			}
			.mui-checkbox input[type=checkbox],
			.mui-radio input[type=radio] {
				top: 6px;
			}
			.mui-content-padded {
				margin-top: 25px;
			}
			.mui-btn {
				padding: 10px;
			}
			.mui-input-group .mui-input-row{height: auto;}
			.security-code{position: absolute;padding: 7px 12px;right:2px;}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">注册</h1>
		</header>
		<div class="mui-content">
			<form id="reg-form" class="mui-input-group">
				<div class="mui-input-row">
					<label>账号</label>
					<input name="phone" type="text" class="mui-input-clear mui-input" placeholder="请输入手机号">
				</div>
				 <div class="mui-input-row">
					<label>验证码:</label>
					<input name="verfiCode" type="text" class="mui-input-clear" placeholder="请输入验证码">
					<button class="security-code">获取验证码</button>
				</div>
				<div class="mui-input-row">
					<label>密码</label>
					<input name="newPass" type="password" class="mui-input-clear mui-input" placeholder="请输入密码">
				</div>
				<div class="mui-input-row">
					<label>单位名称</label>
					<input type="text" name="companyName" class="mui-input-clear mui-input" placeholder="请输入单位名称">
				</div>
				<div class="mui-input-row mui-row">
					<div class="mui-col-sm-6 mui-col-xs-12">
						<div class="mui-input-row mui-radio">
							<label>学校</label>
							<input name="companyType"  value="XUEXIAO" type="radio" checked>
						</div>
					</div>
					<div class="mui-col-sm-6 mui-col-xs-12">
						<div class="mui-input-row mui-radio">
							<label>机构</label>
							<input name="companyType" value="JIGOU" type="radio">
						</div>
					</div>
				</div>
				<div class="mui-input-row">
					<label>地区:</label>
					<span id="area" style="line-height: 40px;font-size: 17px;">点击选择地区</span>
					<input id="provinceId" type="hidden" name="provinceId">
					<input id="cityId" type="hidden" name="cityId">
					<input id="areaId" type="hidden" name="areaId">
				</div>
			</form>
			<div class="mui-content-padded">
				<button id='reg' class="mui-btn mui-btn-block mui-btn-primary" data-loading-text="提交中">注册</button>
			</div>
			<!--<div class="mui-content-padded">-->
				<!--<p>注册文字描述信息。</p>-->
			<!--</div>-->
		</div>
		<script src="js/mui.min.js"></script>
		<script src="js/jquery-1.9.1.min.js"></script>
		<script src="js/common.js"></script>
		<script src="js/mui.picker.js"></script>
		<script src="js/mui.poppicker.js"></script>
		<script src="js/city.data.js"></script>
		<script>

			(function($, doc) {
				$.ready(function() {
					/**
					 * 获取对象属性的值
					 * 主要用于过滤三级联动中，可能出现的最低级的数据不存在的情况，实际开发中需要注意这一点；
					 * @param {Object} obj 对象
					 * @param {String} param 属性名
					 */
					var _getParam = function(obj, param) {
						return obj[param] || '';
					};

					var cityPicker3 = new $.PopPicker({
						layer: 3
					});
					cityPicker3.setData(cityData);
					var showCityPickerButton = doc.getElementById('area');
					var cityResult3 = doc.getElementById('area');
					showCityPickerButton.addEventListener('tap', function(event) {

						cityPicker3.show(function(items) {
							// console.log(items)
							// console.log(_getParam(items[0], 'value'))
							cityResult3.innerText =  _getParam(items[0], 'text') + " " + _getParam(items[1], 'text') + " " + _getParam(items[2], 'text');
							doc.getElementById("provinceId").value=_getParam(items[0], 'value');
							doc.getElementById("cityId").value=_getParam(items[1], 'value');
							doc.getElementById("areaId").value=_getParam(items[2], 'value');

						});
					}, false);
				});
			})(mui, document);

			var count = 60; //间隔函数，1秒执行
			var InterValObj1; //timer变量，控制时间
			var curCount1;//当前剩余秒数
			mui(".mui-content").on('tap','.security-code',function(){
				curCount1 = count;
				if (!checkPhone($("input[name=phone]").val())) {
					mui.toast('请填写正确的手机号码。',{ duration:'2000', type:'div' });
					return false;
				}
				$(".security-code").text("重新发送");
				//设置button效果，开始计时
				$(".security-code").attr("disabled", "true");
				$(".security-code").text( + curCount1 + "秒再获取");
				InterValObj1 = window.setInterval(SetRemainTime1, 1000); //启动计时器，1秒执行一次
				//发送验证码
				$.ajax({
					type: "get",
					url: "../user/sms",
					data: {"phone":$("input[name=phone]").val()},
					dataType: "json",
					contentType: 'application/json',
					success: function(data){
						console.log(data);

					},
					error:function(){
						mui.toast('发送验证码失败，请联系管理员',{ duration:'2000', type:'div' });
					}
				});
			});
			function SetRemainTime1() {
				if (curCount1 == 0) {
					window.clearInterval(InterValObj1);//停止计时器
					$(".security-code").removeAttr("disabled");//启用按钮
					$(".security-code").text("重新发送");
				}
				else {
					curCount1--;
					$(".security-code").text( + curCount1 + "秒再获取");
				}
			}
			//提交注册信息
			mui(".mui-content").on('tap','#reg',function(){
				var flag=checkPhone($("input[name=phone]").val());
				if(!flag){
					mui.toast('请填写正确的手机号码。',{ duration:'2000', type:'div' });
				}
				if($.trim($("input[name=verfiCode]").val())==""||$.trim($("input[name=newPass]").val())==""||$.trim($("input[name=companyName]").val())==""||$.trim($("input[name=provinceId]").val())==""||$.trim($("input[name=cityId]").val())==""){
					mui.toast('验证码、密码、单位名称、地区为必填项。',{ duration:'2000', type:'div' });
				}
				var that=this;
				if(flag){
					mui(this).button('loading');
					$.ajax({
						type: "post",
						url: "../user/register",
						data: JSON.stringify(getFormData($('#reg-form'))),
						dataType: "json",
						contentType: 'application/json',
						success: function(data){
							console.log(data);
							if(data.success){
								mui(that).button('reset');
								// mui.openWindow({
								// 	url:'login.html'
								// });
							}

						},
						error:function(){
							mui.toast('添加单位信息出现异常，请联系管理员',{ duration:'2000', type:'div' });
						}
					});
				}


			});


		</script>
	</body>

</html>